<template>
  <div>
    <ul>
      <li>{{ user.name }}</li>
      <li>{{ user.age }}</li>
      <li>{{ user.sex }}</li>
      <li>{{ refValue.name }}</li>
      <li>{{ refValue.age }}</li>
    </ul>
    <button @click="handle">点击</button>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  // reactive 通常用来定义复杂类型的响应 返回的是一个proxy代理对象
  setup() {
    const user = reactive({
      name: '李唯一',
      age: 18
    })
    const refValue = ref({
      name: '张若尘',
      age: 11111
    })
    console.log(user)
    function handle() {
      console.log(user.name);
      // 直接调用数据
      user.name = '姜宁'
      user.age += 2
      // 直接给代理对象添加属性会有问题 因为对象里原有的属性 类型推论自动加上了数据类型 所有需要给user加上类型
      user.sex = '女'
      // 缺点 bug
      // 直接给user重新赋值 会丢失响应式
      // 如果重新赋值 丢失的是原来响应式数据的指针地址，变了一个新的指针地址
      user = {
        name: '左丘红婷',
        age: 20
      }
    }
    return {
      user, refValue, handle
    }
  }
})
</script>

<style lang="scss" scoped></style>